<template>
  <v-layout type="main">

    <div class="detail-box">
      <div class="rollback" @click="$router.push('/algorithm')">
        <img src="~@/assets/img/prev.png" alt="">
        <span>返回</span>
      </div>

      <div class="code-description">
        <div class="code-desc-header">
          <div class="title">
            <div class="title-header">
              <span>{{ detailData.name }}</span>
            </div>

            <div class="code-tags">
              <div class="user-tag tag">
                <img src="~@/assets/img/user.png" alt="">
                {{
                  detailData.create_user && (detailData.create_user.nick_name ||
                    detailData.create_user.username)
                }}
              </div>

              <div class="version-tag tag">
                <div class="ver-title">
                  <img src="~@/assets/img/branch.png" alt="">
                  <span>版本 {{ version.version }}</span>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </div>
                <div class="content">
                  <div class="ver-item" v-for="item in versionOptions" :key="item.id" @click="versionChange(item)">
                    {{ item.version }}
                  </div>
                </div>
              </div>

              <div class="time-tag tag">
                <span>开始时间：</span>
                {{ detailData.create_time }}
              </div>

              <div class="time-tag tag">
                <span>更新时间：</span>
                {{ detailData.update_time }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="btns-container">
        <div class="alick-handle-btns">
          <el-button class="handle-btn" type="success" size="medium" v-if="active == 1 || active == 2" @click="fork">
            Fork
          </el-button>
        </div>
      </div>
    </div>

    <div :class="['layout-content', { 'layout-content-nodetail': $route.meta.hideDetails }]">
      <router-view class="content-detail" :detailData="detailData" :version="version" v-if="version" />
    </div>
  </v-layout>
</template>
  
<script>

import { getMarketAlgorithmDetail } from '@/api/marketAlgorithm'
import { getAllMarketAlgorithmVersions, getMarketAlgorithmVersionDetail } from '@/api/marketAlgorithmVersion'
export default {
  data() {
    return {
      nowRouter: this.$route.name,
      thisRouter: [],
      detailData: {},
      active: this.$route.query.active,
      versionOptions: [
        {
          id: 1,
          version: "v1"
        }
      ],
      // version: null,
      version: {
        scenario: {
          name: "scenario"
        },
        simulation_node_group: {
          image: {
            name: "v1",
          }
        },
      },
      id: this.$route.query.id,
    };
  },
  methods: {
    skip() {
      let path = `/algorithm/${this.thisRouter.filter(e => e.name == this.nowRouter)[0].path}`
      if (path == this.$route.path) return
      this.$router.push({
        path,
        query: {
          id: this.$route.query.id
        }
      })
    },
    async getVersions() {
      let ret = await getAllMarketAlgorithmVersions({ algorithmId: this.$route.query.id })
      this.versionOptions = ret.data
      if (this.versionOptions.length > 0) {
        let ret = await getMarketAlgorithmVersionDetail({ id: this.versionOptions[0].id })
        this.version = ret.data
      }
    },
    async versionChange(data) {
      console.log("version", this.version)
      let ret = await getMarketAlgorithmVersionDetail({ id: data.id })
      this.version = ret.data
      this.$forceUpdate()
    },
    async getDetail() {
      if (this.$route.query.id) {
        let res = await getMarketAlgorithmDetail({ id: this.$route.query.id })
        this.detailData = res.data
      }
    },
    async fork() {
      if (!this.version) {
        this.$message.error('暂无版本数据')
        return
      }
      let query = {
        algorithmVersion_id: this.version && this.version.id,
        algorithm_id: this.detailData.id,
        algorithm_name: this.detailData.name,
        algorithm_desc: this.detailData.desc,
        algorithm_avatar: this.detailData.avatar,
      }
      this.$router.push({
        path: this.active === 1 ? "/gameModel/detail" : '/gameExperiment/detail',
        query
      })
    },

  },
  mounted() {
    let temp = this.$router.options.routes.filter(
      e => e.name == 'algorithm' && e.children
    )
    console.log('query', this.$route.query)
    this.thisRouter = temp[0].children.filter(e => !e.meta.hideDetails)
    this.getDetail()
    this.getVersions()
  },

  destroyed() {

  },
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-layout.less";
</style>